<template>
  <el-form
    label-position="top"
    label-width="80px"
    :model="form"
    :rules="rules"
    ref="form"
  >
    <!-- 乘机人 -->
    <div class="flyer">
      <div class="order_title">乘机人</div>
      <div
        class="flyer_form"
        :key="index"
        v-for="(item,index) in form.users"
      >
        <span
          v-if="index!==0"
          class="decrease"
          @click="decrease(index)"
        >-</span>
        <el-form-item
          label="乘机人"
          :prop="`users[${index}].username`"
          :rules="{ required: true, message: '乘机人不能为空', trigger: 'blur' }"
        >
          <el-input v-model="item.username"></el-input>
        </el-form-item>
        <el-form-item
          label="证件类型"
          :prop="`users[${index}].id`"
          :rules="{ required: true, message: '证件号码不能为空', trigger: 'blur' }"
        >
          <div class="se_input">
            <el-select
              placeholder="请选择证件类型"
              value="sfz"
            >
              <el-option
                label="身份证"
                value="sfz"
              ></el-option>
              <el-option
                label="护照"
                value="huzhao"
              ></el-option>
            </el-select>
            <el-input
              v-model="item.id"
              placeholder="证件号码"
            ></el-input>
          </div>
        </el-form-item>

        <div class="dashed_line"></div>
      </div>

      <el-button
        type="primary"
        @click="addUsers"
      >添加乘机人</el-button>

    </div>
    <!-- 保险 -->
    <div class="insurance">
      <div class="order_title">保险</div>
      <div class="insurance_form">
        <div
          v-for="(item ,index) in insurances"
          :key="index"
          style="margin-bottom:10px;"
        >
          <el-checkbox
            :label="`${item.type}: ￥${item.price}/份x1 最高赔付${item.compensation} `"
            border
            @change="insurancesChange(item.id)"
          ></el-checkbox>
        </div>
      </div>
    </div>
    <div class="dashed_line"></div>
    <!-- 联系人 -->
    <div class="contact">
      <div class="order_title">联系人</div>
      <div class="contact_form">
        <el-form-item
          label="姓名"
          class="inp_form"
          prop="contactName"
        >
          <el-input v-model="form.contactName"></el-input>
        </el-form-item>
        <el-form-item
          label="手机"
          class="inp_form"
          prop="contactPhone"
        >
          <el-input v-model="form.contactPhone"> <template slot="append">
              <span @click="sendCaptcha">{{countDown.label}}</span></template></el-input>
        </el-form-item>
        <el-form-item
          label="验证码"
          class="inp_form"
          prop="captcha"
        >
          <el-input v-model="form.captcha"></el-input>
        </el-form-item>
      </div>
      <el-button
        class="submit_btn"
        type="warning"
        @click="handleSubmit"
      >提交订单</el-button>
    </div>
  </el-form>
</template>

<script>
/* 
总的机票的价格:
 ( 机票的单价 + 保险的总价格(可能是2个)  +  燃油费 )  * 乘机人数量 

组件中的乘机人的数量 和 用户选中的保险的id 传递给父页面  父页面自己来计算总价格 即可 

 */

export default {
  props: ["insurances"],
  data() {
    return {
      form: {
        // 乘机人列表
        users: [{ username: "dfdfd", id: "sdfdfd" }],
        // 用户选择了的保险id数组
        insurances: [],
        // 联系人姓名
        contactName: "dffdf",
        // 联系人的手机号码
        contactPhone: "3454345",
        // 验证码
        captcha: "000000",
        // 是否需要发票
        invoice: false,
        // 座位的id
        seat_xid: this.$route.query.seat_xid,
        // 航班的id
        air: this.$route.query.id,
      },
      // 验证规则对象
      rules: {
        contactName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactPhone: [
          { required: true, message: "请输入手机", trigger: "blur" },
        ],
        // 注意
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        // 验证对象数组 ???
      },
      // 验证码倒计时效果数据
      countDown: {
        time: 60,
        label: "发送验证码",
        // 节流阀
        isGoing: false,
        // 定时器的id
        timerId: -1,
      },
    };
  },
  watch: {
    "form.users": function () {
      // console.log("form.users");
      this.uploadComData();
    },
    "form.insurances": function () {
      // console.log("form.insurances");
      this.uploadComData();
    },
  },
  mounted() {
    this.uploadComData();
  },

  methods: {
    // 点击 添加乘机人
    addUsers() {
      this.form.users.push({ username: "", id: "" });
    },
    // 删除乘机人
    decrease(index) {
      // console.log(index);
      this.form.users.splice(index, 1);
    },
    // 用户选择了保险事件
    insurancesChange(id) {
      const index = this.form.insurances.findIndex((v) => v === id);
      if (index === -1) {
        this.form.insurances.push(id);
      } else {
        this.form.insurances.splice(index, 1);
      }
    },
    // 将乘机人数量和保险数组 传递给父元素
    uploadComData() {
      const data = {
        userLength: this.form.users.length,
        insurances: this.form.insurances,
      };

      this.$emit("priceComputed", data);
    },
    // 点击发送验证码
    sendCaptcha() {
      /* 
      1 获取手机号码
      2 验证是否合法
      3 合法
        1 发送
      4 一般都会开启一个定时器的!!! 
        60s - 59s 
       */

      // 验证手机号码
      this.$refs.form.validateField("contactPhone", async (errMsg) => {
        if (errMsg === "") {
          // 通过
          // 判断倒计时是不是正在进行
          if (this.countDown.isGoing) {
            return;
          } else {
            // 发送请求 成功了再开启验证码!!!
            // async await (async 一定要找离await 最近的那个函数声明那里!!! )
            const res = await this.$axios.post("/captchas", {
              tel: this.form.contactPhone,
            });
            console.log(res);

            // 告诉人家 我已经开启了倒计时
            this.countDown.isGoing = true;
            this.countDown.label = `(${this.countDown.time})S 后再获取`;

            this.countDown.timerId = setInterval(() => {
              this.countDown.time--;
              this.countDown.label = `(${this.countDown.time})S 后再获取`;
              // 判断时间到了
              if (this.countDown.time === -1) {
                // 重置按钮的文本
                // 清除定时器
                // 倒计时的时间需要重新变为60s
                // 节流阀  isGoing =false 已经没有人在使用 倒计时
                this.countDown.label = "发送验证码";
                clearInterval(this.countDown.timerId);
                this.countDown.time = 60;
                this.countDown.isGoing = false;
              }
            }, 1000);
          }
        } else {
          // 不通过
        }
      });
    },
    // 提交订单
    handleSubmit() {
      /* 
      1 表单的验证 
      2 自己后台验证
        1 必须要我们先点击一下 获取验证码  发送一下请求
        2 后面把参数都准备好  提交 都会失败!! 
       */
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          /* 
        1 检查一下 token 是否存在 
          1 不存在 跳转会登录页面即可 
        2 准备参数 完成订单提交
          1 post 请求请求体参数
          2 请求头的参数 token 
          3 请求成功
            1 用户一个提示 
            2 等一会之后 跳转页面 -> 支付页面 
        
         */

          const { token } = this.$store.state.user;
          if (!token) {
            // token不存在
            // 跳转之前 找一个地方 存一下当前的url即可
            // vuex 本地存储   url上的

            // 获取当前页面的url  完整
            const { fullPath } = this.$route;
            // 将url 设置进  vuex中
            this.$store.commit("page/setSourceURL", fullPath);
            this.$router.push(`/user/login`);
            return;
          }

          // 通过了所有的验证 准备参数来 完成订单的提交
          const res = await this.$axios.post("/airorders", this.form, {
            headers: {
              Authorization: `Bearer ` + token,
            },
          });

          this.$message.success(res.data.message);
          setTimeout(() => {
            this.$router.push("/air/pay?id=" + res.data.data.id);
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.order_title {
  font-size: 22px;
  height: 60px;
  display: flex;
  align-items: center;
}
.se_input {
  display: flex;
}
.flyer_form {
  position: relative;
  .decrease {
    position: absolute;
    top: 50%;
    right: -5px;
    background-color: #ddd;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.dashed_line {
  border-bottom: 1px dashed #666;
  margin-top: 25px;
  margin-bottom: 25px;
}

.contact {
  .contact_form {
    .inp_form {
      display: flex;

      /deep/ .el-form-item__label {
        width: 70px;
        text-align: right;
        padding-right: 10px;
      }
      /deep/ .el-input {
        width: 250px;
      }
    }
  }
  .submit_btn {
    width: 250px;
    height: 50px;
    margin: 0 auto;
    display: block;
  }
  margin-bottom: 50px;
}
</style>

